<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Diff the ends </title>
  <style>
    body {
      background-color: #2a2a2a;
      color: #dcdcdc;
    }

    #grids {
      display: grid;
      grid-template-columns: repeat(7, auto);
    }

    #grids>span>div {
      letter-spacing: 2px;
      /* background-color: #1e1e1e; */
      margin: 0.5em;
      display: flex;
      flex-flow: column;
    }

    div>tt {
      line-height: 1em;
    }

    div>tt:nth-child(2n+1) {
      color: #b8d7a3;
    }

    div>tt:nth-child(2n) {
      color: #569cd6;
    }

    .cls0 {
      background-color: #1e1e1e;
    }

    .cls1 {
      background-color: #aeaeae;
    }

    .cls2 {
      background-color: #ee1e1e;
    }

    .cls3 {
      background-color: #1eeeee;
    }

    .cls4 {
      background-color: #1e1eee;
    }

    .cls5 {
      background-color: #1eee1e;
    }

    .cls6 {
      background-color: #ee1eee;
    }
  </style>
</head>

<body>
  <p><span id="cbs">显示</span>队列前的零<input id="cbz" type="checkbox" checked />
    &nbsp;<span id="hts">队末</span><input id="htz" type="checkbox" checked />&nbsp;</p>
  <p>输入借位二进制：<input id="tpr" type="text" value="0" /></p>
  <p>输入数字三进制：<input id="tpt" type="text" value="1" /></p>
  <div>编码:&nbsp;<tt id="rcd" /></div>

  <section id="grids"></section>

  <script src="./machine_plus.js"></script>

  <script>
    const ENDS = [
      { r: '', t: '' },
      { r: '0', t: '0' },
      { r: '0', t: '1' },
      { r: '0', t: '2' },
      { r: '1', t: '0' },
      { r: '1', t: '1' },
      { r: '1', t: '2' }
    ];

    const grids = document.getElementById('grids');
    const tpt = document.querySelector('#tpt');
    const tpr = document.querySelector('#tpr');
    const rcd = document.querySelector('#rcd');
    const hts = document.querySelector('#hts');
    const htz = document.querySelector('#htz');
    const diff = [];

    let ht = true;

    async function drawCol(rs, ts) {
      robots = Array.from(rs).map(e => +e);
      track = Array.from(ts).map(e => +e);

      let span = document.createElement("span");

      let div0 = document.createElement("div");
      div0.innerHTML = `<tt>${robots.map(e => WIDTH_SIGN[e]).join('')}</tt><tt>${track.map(e => WIDTH_SIGN[e]).join('')}</tt>`;
      span.appendChild(div0);

      let cnt = 0, width = 0;

      while (robots.some(e => !!e) || track.some((e, i, t) => i <= t.length - 2 && !!e)) {
        let div = document.createElement("div");

        div.innerHTML = '<tt>' + robots.map(e => ROBOT_SIGN[e]).join('')
          + '</tt><tt>' + track.map(e => TRACK_SIGN[e]).join('') + '</tt>';

        span.appendChild(div);
        cnt++;
        width = Math.max(track.length, width);

        trip();
      }

      let hx = (cnt << 16) + width;
      if (!diff.includes(hx)) {
        diff.push(hx);
      }
      let div1 = document.createElement("div");
      div1.innerHTML = `<tt>${cnt}</tt><tt>${width}</tt>`;
      let idx = diff.indexOf(hx);
      div1.classList.add(`cls${idx}`);
      rcd.textContent += idx;
      span.insertBefore(div1, span.firstChild.nextSibling);

      grids.appendChild(span);
    }

    async function showSteps() {

      diff.length = 0;
      rcd.textContent = '';

      let [rb, tb] = [tpr.value, tpt.value];

      if (Array.from(rb).some(e => e > 1) || Array.from(tb).some(e => e > 2)) {
        alert('错误的输入');
        return null;
      }

      let cols = new Array(ENDS.length);

      for (let i = 0; i < ENDS.length; i++) {
        if (ht) {
          cols[i] = { r: rb.padEnd(Math.max(rb.length, tb.length), '0') + ENDS[i].r, t: tb + ENDS[i].t };
        } else {
          cols[i] = { r: ENDS[i].r + rb, t: ENDS[i].t + tb };
        }
      }

      while (grids.firstChild) {
        grids.removeChild(grids.firstChild);
      }

      for (let i = 0; i < cols.length; i++) {
        await drawCol(cols[i].r, cols[i].t);
      }

    };

    tpr.addEventListener('change', () => {
      showSteps();
    }, false);
    tpt.addEventListener('change', () => {
      showSteps();
    }, false);

    cbz.addEventListener('change', () => {
      fillZero = cbz.checked;
      cbs.textContent = cbz.checked ? '显示' : '清除';
      showSteps();
    }, false);

    htz.addEventListener('change', () => {
      ht = htz.checked;
      hts.textContent = htz.checked ? '队末' : '队首';
      showSteps();
    }, false);

  </script>
</body>

</html>